import React, {useEffect, useState} from "react";
import { useNavigate, useLocation } from 'react-router-dom';
import axios from "axios";

import { connect } from 'react-redux';

import {Layout, Menu} from "antd";
import {HomeOutlined, KeyOutlined, UserOutlined, ProfileOutlined, AuditOutlined, DeliveredProcedureOutlined } from "@ant-design/icons";
import './SideMenu.css';

const { Sider } = Layout;


/**
 * 使用后端数据
 *
 * Menu
 *
 * 使用useNavigate
 */


const iconList= {
    '/home': <HomeOutlined />,
    '/user-manage': <UserOutlined />,
    '/right-manage': <KeyOutlined />,
    '/news-manage': <ProfileOutlined />,
    '/audit-manage': <AuditOutlined />,
    '/publish-manage': <DeliveredProcedureOutlined />
};


function SideMenu(props) {

    const [menuItems, setMenuItems] = useState([]);
    const navigate = useNavigate();  // 用于路由跳转
    const location = useLocation();  // 获取当前路由路径

    const { role: {rights} } = JSON.parse(localStorage.getItem('token'));
    const checkPagePermission= (item)=>{
        return item.pagepermission===1 && rights.includes(item.key);
    }

    const getMenuList= (data)=>{
        let menuList= [];
        for(let i=0; i<data.length; i++) {
            if(checkPagePermission(data[i])) {
                let menu= {
                    key: data[i].key,
                    icon: iconList[data[i].key],
                    label: data[i].title
                }
                if(data[i].children) {
                    let child= getMenuList(data[i].children);
                    if(child.length) {
                        menu.children= child;
                    }
                }
                menuList.push(menu);
            }
        }
        return menuList;
    }


    useEffect(()=>{
        axios.get("http://localhost:5000/rights?_embed=children").then(response=>{
            // console.log(response.data);
            const menuList= getMenuList(response.data);
            setMenuItems(menuList);
        });
    }, []);  // 空数组[]，表示第一次渲染时才执行useEffect

    // const [collapsed, setCollapsed] = useState(false);

    return (
        <Sider trigger={null} collapsible collapsed={ props.isCollapsed }>
            <div className="side-bar">
                <div className="logo">新闻发布管理系统</div>
                <div className="menu-list">
                    <Menu
                        theme="dark"
                        mode="inline"
                        defaultOpenKeys={['/' + location.pathname.split('/')[1]]}
                        selectedKeys={[location.pathname]}
                        items={ menuItems }
                        onClick={ ({ key, keyPath })=> {
                            // console.log('key: ', key);
                            // console.log('keyPath: ', keyPath);
                            navigate(key);  // 路由跳转
                        }}
                    />
                </div>
            </div>

        </Sider>
    );
}


const mapStateToProps= ({collapsedReducer: { isCollapsed }})=>{
    return {
        isCollapsed
    }
}
export default connect( mapStateToProps )(SideMenu)
